<template>
  <div class="header-container">
    <!-- 左侧 -->
    <div class="l-content">
        <el-button style="margin-right: 20px;" @click="handleMenu" icon="el-icon-menu" size="mini"></el-button>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{item.label}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!-- 右侧 -->
    <div class="r-content">
        <el-dropdown @command="handleClick">
            <span class="el-dropdown-link">
                <img class="user" :src="$store.state.tab.image"  alt="">
                <!-- <img class="user" src="../assets/images/user.png"  alt=""> -->
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="pc">个人中心</el-dropdown-item>
                <el-dropdown-item command="cancel">退出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Cookie from 'js-cookie'
import http from "@/utils/request";
export default {
  name: 'CommonHeader',
  data() {
    return {
        
    };
  },
  mounted() {

  },
  methods: {
    handleMenu(){
        // 访问tab下的collapseMenu方法，修改isCollapse的值
        this.$store.commit('collapseMenu')
    },
    handleClick(command){
        if(command==='cancel'){
            // 删除token
            Cookie.remove('token')
            Cookie.remove('menu')
            Cookie.remove('imageUrl')
            Cookie.remove('id')
            Cookie.remove('time')
            Cookie.remove('status')
            Cookie.remove('username')
            // 返回登录页
            this.$router.push({
                name:'main'
            })
        }else if(command==='pc'){
            if(this.$route.path!=='/layout/pc'){
                this.$router.push({
                    name:'PersonalCenter'
                })
            }
        }
    }
  },
  computed:{
    // 返回对象用tags  ...
    ...mapState({
        // 为state.tab.tabsList取别名为tags
        tags:state => state.tab.tabsList
    }),
    status(){
        return this.$store.state.tab.status;
    }
  },
};
</script>

<style lang="less" scoped>
    .header-container{
        padding: 0px 20px;
        background-color: #333;
        height: 60px;
        // menu图标居中
        display: flex;
        // 左右div两头显示
        justify-content: space-between;
        // 垂直居中
        align-items: center;
        .text{
            color: #fff;
            font-size: 14px;
            margin-left: 10px;
        }
        .r-content{
            .user{
                // 头像宽
                width: 40px;
                // 高
                height: 40px;
                // 圆角
                border-radius: 50%;
            }
        }
        .l-content{
            display: flex;
            align-items: center;
           /deep/.el-breadcrumb__item{
                .el-breadcrumb__inner{
                    font-weight: normal;
                    &.is-link{
                        color:#666
                    }
                }
                &:last-child{
                    .el-breadcrumb__inner{
                        color:#fff;
                    }
                }
            }
        }
    }
</style>